<!DOCTYPE html>
<!-- Template Name: Clip-One - Responsive Admin Template build with Twitter Bootstrap 3 Version: 1.0 Author: ClipTheme -->
<html>
	<!-- start: HEAD -->
	<head>
		<title>Clip-One - Responsive Admin Template</title>
		<!-- start: META -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: GLOBAL CSS -->
		<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
		<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/plugins/glyphicons/css/glyphicons.css">
		<link rel="stylesheet" href="assets/plugins/glyphicons_halflings/css/halflings.css">
		<link rel="stylesheet" href="assets/css/main.css">
		<link rel="stylesheet" href="assets/css/main-responsive.css">
		<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
		<link rel="stylesheet" href="assets/css/theme_navy.css">
		<!--[if IE 7]>
		<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome-ie7.min.css">
		<![endif]-->
		<!-- end: GLOBAL CSS -->
		<!-- start: PAGE LEVEL CSS -->
		<link href="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
		<link rel="stylesheet" href="assets/plugins/jQRangeSlider/css/classic-min.css">
		<!-- end: PAGE LEVEL CSS -->
	</head>
	<!-- end: HEAD -->
	<!-- start: BODY -->
	<body>
		<!-- start: HEADER -->
		<header class="navbar navbar-inverse navbar-fixed-top">
			<!-- start: TOP NAVIGATION CONTAINER -->
			<div class="container">
				<div class="navbar-header">
					<!-- start: RESPONSIVE MENU TOGGLER -->
					<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<!-- end: RESPONSIVE MENU TOGGLER -->
					<!-- start: LOGO -->
					<a class="navbar-brand" href="index.html">
						<img src="assets/images/logo.png" alt="logo"/>
					</a>
					<!-- end: LOGO -->
				</div>
				<div class="navbar-tools">
					<!-- start: TOP NAVIGATION MENU -->
					<ul class="nav navbar-right">
						<!-- start: TO-DO DROPDOWN -->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<i class="icon-check-sign"></i>
								<span class="badge"> 12</span>
							</a>
							<ul class="dropdown-menu todo">
								<li>
									<span class="dropdown-menu-title"> You have 12 pending tasks</span>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc" style="opacity: 1; text-decoration: none;"> Windows Phone 8 App</span>
										<span class="label label-danger" style="opacity: 1;"> today</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc" style="opacity: 1; text-decoration: none;"> New frontend layout</span>
										<span class="label label-danger" style="opacity: 1;"> today</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc"> Hire developers</span>
										<span class="label label-warning"> tommorow</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc"> Windows Phone 8 App</span>
										<span class="label label-warning"> tommorow</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc"> New frontend layout</span>
										<span class="label label-success"> this week</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc"> Hire developers</span>
										<span class="label label-success"> this week</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc"> New frontend layout</span>
										<span class="label label-info"> this month</span>
									</a>
								</li>
								<li>
									<a class="todo-actions" href="javascript:void(0)">
										<i class="icon-check-empty"></i>
										<span class="desc"> Hire developers</span>
										<span class="label label-info"> this month</span>
									</a>
								</li>
								<li class="view-all">
									<a href="javascript:void(0)">
										See all tasks <i class="icon-circle-arrow-right"></i>
									</a>
								</li>
							</ul>
						</li>
						<!-- end: TO-DO DROPDOWN-->
						<!-- start: NOTIFICATION DROPDOWN -->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<i class="icon-warning-sign"></i>
								<span class="badge"> 11</span>
							</a>
							<ul class="dropdown-menu notifications">
								<li>
									<span class="dropdown-menu-title"> You have 11 notifications</span>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-primary"><i class="icon-user"></i></span>
										<span class="message"> New user registration</span>
										<span class="time"> 1 min</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-success"><i class="icon-comment"></i></span>
										<span class="message"> New comment</span>
										<span class="time"> 7 min</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-success"><i class="icon-comment"></i></span>
										<span class="message"> New comment</span>
										<span class="time"> 8 min</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-success"><i class="icon-comment"></i></span>
										<span class="message"> New comment</span>
										<span class="time"> 16 min</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-primary"><i class="icon-user"></i></span>
										<span class="message"> New user registration</span>
										<span class="time"> 36 min</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-warning"><i class="icon-shopping-cart"></i></span>
										<span class="message"> 2 items sold</span>
										<span class="time"> 1 hour</span>
									</a>
								</li>
								<li class="warning">
									<a href="javascript:void(0)">
										<span class="label label-danger"><i class="icon-user"></i></span>
										<span class="message"> User deleted account</span>
										<span class="time"> 2 hour</span>
									</a>
								</li>
								<li class="warning">
									<a href="javascript:void(0)">
										<span class="label label-danger"><i class="icon-shopping-cart"></i></span>
										<span class="message"> Transaction was canceled</span>
										<span class="time"> 6 hour</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-success"><i class="icon-comment"></i></span>
										<span class="message"> New comment</span>
										<span class="time"> yesterday</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)">
										<span class="label label-primary"><i class="icon-user"></i></span>
										<span class="message"> New user registration</span>
										<span class="time"> yesterday</span>
									</a>
								</li>
								<li class="view-all">
									<a href="javascript:void(0)">
										See all notifications <i class="icon-circle-arrow-right"></i>
									</a>
								</li>
							</ul>
						</li>
						<!-- end: NOTIFICATION DROPDOWN -->
						<!-- start: MESSAGE DROPDOWN -->
						<li class="dropdown">
							<a class="dropdown-toggle" data-close-others="true" data-hover="dropdown" data-toggle="dropdown" href="#">
								<i class="icon-envelope"></i>
								<span class="badge"> 9</span>
							</a>
							<ul class="dropdown-menu posts">
								<li>
									<span class="dropdown-menu-title"> You have 9 messages</span>
								</li>
								<li>
									<a href="javascript:;">
										<div class="clearfix">
											<div class="thread-image">
												<img alt="" src="./assets/images/avatar-2.jpg">
											</div>
											<div class="thread-content">
												<span class="author">Nicole Bell</span>
												<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
												<span class="time"> Just Now</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<div class="clearfix">
											<div class="thread-image">
												<img alt="" src="./assets/images/avatar-1.jpg">
											</div>
											<div class="thread-content">
												<span class="author">Peter Clark</span>
												<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
												<span class="time">2 mins</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<div class="clearfix">
											<div class="thread-image">
												<img alt="" src="./assets/images/avatar-3.jpg">
											</div>
											<div class="thread-content">
												<span class="author">Steven Thompson</span>
												<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
												<span class="time">8 hrs</span>
											</div>
										</div>
									</a>
								</li>
								<li class="view-all">
									<a href="pages_messages.html">
										See all messages <i class="icon-circle-arrow-right"></i>
									</a>
								</li>
							</ul>
						</li>
						<!-- end: MESSAGE DROPDOWN -->
						<!-- start: USER DROPDOWN -->
						<li class="dropdown current-user">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<img src="assets/images/avatar-1-small.jpg" alt="">
								<span class="username">Peter Clark</span>
								<i class="icon-caret-down"></i>
							</a>
							<ul class="dropdown-menu">
								<li>
									<a href="pages_user_profile.html">
										<i class="icon-user"></i>
										My Profile
									</a>
								</li>
								<li>
									<a href="pages_calendar.html">
										<i class="icon-cog"></i>
										My Calendar
									</a>
								<li>
									<a href="pages_messages.html">
										<i class="icon-envelope"></i>
										My Messages (3)
									</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="utility_lock_screen.html"><i class="icon-lock"></i>
										Lock Screen </a>
								</li>
								<li>
									<a href="login_example1.html">
										<i class="icon-key"></i>
										Log Out
									</a>
								</li>
							</ul>
						</li>
						<!-- end: USER DROPDOWN -->
					</ul>
					<!-- end: TOP NAVIGATION MENU -->
				</div>
			</div>
			<!-- end: TOP NAVIGATION CONTAINER -->
		</header>
		<!-- end: HEADER -->
		<!-- start: MAIN CONTAINER -->
		<div class="main-container">
			<div class="navbar-content">
				<!-- start: SIDEBAR -->
				<div class="main-navigation navbar-collapse collapse">
					<!-- start: MAIN NAVIGATION MENU -->
					<ul class="main-navigation-menu">
						<!-- start: MAIN MENU TOGGLER BUTTON -->
						<li>
							<div class="navigation-toggler"></div>
						</li>
						<!-- end: MAIN MENU TOGGLER BUTTON -->
						<li>
							<a href="index.html"><i class="icon-home"></i>
								<span class="title"> Dashboard </span><span class="selected"></span>
							</a>
						</li>
						<li class="active open">
							<a href="javascript:void(0)"><i class="icon-puzzle-piece"></i>
								<span class="title"> UI Lab </span><i class="icon-arrow"></i>
								<span class="selected"></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="ui-elements.html">
										<span class="title"> Elements </span>
									</a>
								</li>
								<li>
									<a href="ui_buttons.html">
										<span class="title"> Buttons &amp; icons </span>
									</a>
								</li>
								<li>
									<a href="ui_modals.html">
										<span class="title"> Extended Modals </span>
									</a>
								</li>
								<li>
									<a href="ui_tabs_accordions.html">
										<span class="title"> Tabs &amp; Accordions </span>
									</a>
								</li>
								<li class="active">
									<a href="ui_sliders.html">
										<span class="title"> Sliders </span>
									</a>
								</li>
								<li>
									<a href="ui_treeview.html">
										<span class="title"> Treeview </span>
									</a>
								</li>
								<li>
									<a href="ui_nestable.html">
										<span class="title"> Nestable List </span>
									</a>
								</li>
								<li>
									<a href="ui_typography.html">
										<span class="title"> Typography </span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)"><i class="icon-th-large"></i>
								<span class="title"> Tables </span><i class="icon-arrow"></i>
								<span class="selected"></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="table_static.html">
										<span class="title">Static Tables</span>
									</a>
								</li>
								<li>
									<a href="table_responsive.html">
										<span class="title">Responsive Tables</span>
									</a>
								</li>
								<li>
									<a href="table_data.html">
										<span class="title">Data Tables</span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)"><i class="icon-edit"></i>
								<span class="title"> Forms </span><i class="icon-arrow"></i>
								<span class="selected"></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="form_elements.html">
										<span class="title">Form Elements</span>
									</a>
								</li>
								<li>
									<a href="form_wizard.html">
										<span class="title">Form Wizard</span>
									</a>
								</li>
								<li>
									<a href="form_validation.html">
										<span class="title">Form Validation</span>
									</a>
								</li>
								<li>
									<a href="form_captcha.html">
										<span class="title">Form with Captcha</span>
									</a>
								</li>
								<li>
									<a href="form_inline.html">
										<span class="title">Inline Editor</span>
									</a>
								</li>
								<li>
									<a href="form_image_cropping.html">
										<span class="title">Image Cropping</span>
									</a>
								</li>
								<li>
									<a href="form_multiple_upload.html">
										<span class="title">Multiple File Upload</span>
									</a>
								</li>
								<li>
									<a href="form_dropzone.html">
										<span class="title">Dropzone File Upload</span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)"><i class="icon-user"></i>
								<span class="title">Login</span><i class="icon-arrow"></i>
								<span class="selected"></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="login_example1.html">
										<span class="title">Login Form Example 1</span>
									</a>
								</li>
								<li>
									<a href="login_example2.html">
										<span class="title">Login Form Example 2</span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)"><i class="icon-paste"></i>
								<span class="title">Pages</span><i class="icon-arrow"></i>
								<span class="selected"></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="pages_timeline.html">
										<span class="title">Timeline</span>
									</a>
								</li>
								<li>
									<a href="pages_calendar.html">
										<span class="title">Calendar</span>
									</a>
								</li>
								<li>
									<a href="pages_messages.html">
										<span class="title">Messages</span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)"><i class="icon-paper-clip"></i>
								<span class="title">Utility</span><i class="icon-arrow"></i>
								<span class="selected"></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="utility_faq.html">
										<span class="title">Faq</span>
									</a>
								</li>
								<li>
									<a href="utility_lock_screen.html">
										<span class="title">Lock Screen</span>
									</a>
								</li>
								<li>
									<a href="utility_404_example1.html">
										<span class="title">Error 404 Example 1</span>
									</a>
								</li>
								<li>
									<a href="utility_404_example2.html">
										<span class="title">Error 404 Example 2</span>
									</a>
								</li>
								<li>
									<a href="utility_404_example3.html">
										<span class="title">Error 404 Example 3</span>
									</a>
								</li>
								<li>
									<a href="utility_500_example1.html">
										<span class="title">Error 500 Example 1</span>
									</a>
								</li>
								<li>
									<a href="utility_500_example2.html">
										<span class="title">Error 500 Example 2</span>
									</a>
								</li>
								<li>
									<a href="utility_pricing_table.html">
										<span class="title">Pricing Table</span>
									</a>
								</li>
								<li>
									<a href="utility_coming_soon.html">
										<span class="title">Cooming Soon</span>
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:;" class="active">
								<i class="icon-sitemap"></i>
								<span class="title"> 3 Level Menu </span>
								<i class="icon-arrow"></i>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="javascript:;">
										Item 1 <i class="icon-arrow"></i>
									</a>
									<ul class="sub-menu">
										<li>
											<a href="#">
												Sample Link 1
											</a>
										</li>
										<li>
											<a href="#">
												Sample Link 2
											</a>
										</li>
										<li>
											<a href="#">
												Sample Link 3
											</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="javascript:;">
										Item 1 <i class="icon-arrow"></i>
									</a>
									<ul class="sub-menu">
										<li>
											<a href="#">
												Sample Link 1
											</a>
										</li>
										<li>
											<a href="#">
												Sample Link 1
											</a>
										</li>
										<li>
											<a href="#">
												Sample Link 1
											</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="#">
										Item 3
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:;">
								<i class="icon-folder-open"></i>
								<span class="title"> 4 Level Menu </span><i class="icon-arrow"></i>
								<span class="arrow "></span>
							</a>
							<ul class="sub-menu">
								<li>
									<a href="javascript:;">
										<i class="icon-cogs"></i>
										Item 1 <i class="icon-arrow"></i>
									</a>
									<ul class="sub-menu">
										<li>
											<a href="javascript:;">
												<i class="icon-user"></i>
												Sample Link 1 <i class="icon-arrow"></i>
											</a>
											<ul class="sub-menu">
												<li>
													<a href="#"><i class="icon-remove"></i>
														Sample Link 1</a>
												</li>
												<li>
													<a href="#"><i class="icon-pencil"></i>
														Sample Link 1</a>
												</li>
												<li>
													<a href="#"><i class="icon-edit"></i>
														Sample Link 1</a>
												</li>
											</ul>
										</li>
										<li>
											<a href="#"><i class="icon-user"></i>
												Sample Link 1</a>
										</li>
										<li>
											<a href="#"><i class="icon-external-link"></i>
												Sample Link 2</a>
										</li>
										<li>
											<a href="#"><i class="icon-bell"></i>
												Sample Link 3</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="javascript:;">
										<i class="icon-globe"></i>
										Item 2 <i class="icon-arrow"></i>
									</a>
									<ul class="sub-menu">
										<li>
											<a href="#"><i class="icon-user"></i>
												Sample Link 1</a>
										</li>
										<li>
											<a href="#"><i class="icon-external-link"></i>
												Sample Link 1</a>
										</li>
										<li>
											<a href="#"><i class="icon-bell"></i>
												Sample Link 1</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="#">
										<i class="icon-folder-open"></i>
										Item 3
									</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="maps.html"><i class="icon-map-marker"></i>
								<span class="title">Maps</span>
								<span class="selected"></span>
							</a>
						</li>
						<li>
							<a href="charts.html"><i class="icon-bar-chart"></i>
								<span class="title">Charts</span>
								<span class="selected"></span>
							</a>
						</li>
					</ul>
					<!-- end: MAIN NAVIGATION MENU -->
				</div>
				<!-- end: SIDEBAR -->
			</div>
			<!-- start: PAGE -->
			<div class="main-content">
				<!-- start: PANEL CONFIGURATION MODAL FORM -->
				<div class="modal fade" id="panel-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title">Panel Configuration</h4>
							</div>
							<div class="modal-body">
								Here will be a configuration form
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">
									Close
								</button>
								<button type="button" class="btn btn-primary">
									Save changes
								</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
				<!-- end: PANEL CONFIGURATION MODAL FORM -->
				<div class="container">
					<!-- start: PAGE HEADER -->
					<div class="row">
						<div class="col-md-12">
							<div class="page-header">
								<h1>Sliders <small>A powerful plugins for selecting value ranges</small></h1>
								<ul class="breadcrumb">
									<li>
										<i class="icon-home"></i>
										<a href="index.html">
											Dashboard
										</a>
									</li>
									<li>
										<i class="icon-puzzle-piece"></i>
										<a href="#">
											UI Lab
										</a>
									</li>
									<li class="active">
										Sliders
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- end: PAGE HEADER -->
					<div class="row">
						<div class="col-md-12">
							<!-- start: RANGE SLIDERS PANEL -->
							<div class="panel panel-default">
								<div class="panel-heading">
									<i class="icon-external-link-sign"></i>
									Range Sliders
									<div class="panel-tools">
										<div class="btn-group">
											<button type="button" class="btn btn-xs btn-link panel-collapse collapses"></button>
											<button type="button" class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal">
												<i class="icon-wrench"></i>
											</button>
											<button type="button" class="btn btn-xs btn-link panel-refresh">
												<i class="icon-refresh"></i>
											</button>
											<button type="button" class="btn btn-xs btn-link panel-close">
												<i class="icon-remove"></i>
											</button>
										</div>
									</div>
								</div>
								<div class="panel-body">
									<div class="alert alert-info">
										A powerful slider for selecting value ranges, supporting dates and more.
									</div>
									<table class="table sliders table-striped">
										<tbody>
											<tr>
												<td style="width:15%">Basic</td>
												<td>
												<div class="example">
													<div id="slider_example_1" class="slider-teal"></div>
												</div></td>
											</tr>
											<tr>
												<td>Date slider</td>
												<td>
												<div class="example">
													<div id="slider_example_3" class="slider-purple"></div>
												</div></td>
											</tr>
											<tr>
												<td>Delay out</td>
												<td>
												<div class="example">
													<div id="slider_example_4" class="slider-green"></div>
												</div></td>
											</tr>
											<tr>
												<td>Duration in/out</td>
												<td>
												<div class="example">
													<div id="slider_example_5" class="slider-yellow"></div>
												</div></td>
											</tr>
											<tr>
												<td>Enabled</td>
												<td>
												<div class="example">
													<div id="slider_example_6" class="slider-teal"></div>
												</div></td>
											</tr>
											<tr>
												<td>Range</td>
												<td>
												<div class="example">
													<div id="slider_example_7" class="slider-blue"></div>
												</div></td>
											</tr>
											<tr>
												<td>Step</td>
												<td>
												<div class="example">
													<div id="slider_example_8" class="slider-green"></div>
												</div></td>
											</tr>
											<tr>
												<td>Edit slider</td>
												<td>
												<div class="example">
													<div id="slider_example_2" class="slider-bricky"></div>
												</div></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- end: RANGE SLIDERS PANEL -->
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<!-- start: CIRCLE DIALS PANEL -->
							<div class="panel panel-default">
								<div class="panel-heading">
									<i class="icon-external-link-sign"></i>
									Circle Dials
									<div class="panel-tools">
										<div class="btn-group">
											<button type="button" class="btn btn-xs btn-link panel-collapse collapses"></button>
											<button type="button" class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal">
												<i class="icon-wrench"></i>
											</button>
											<button type="button" class="btn btn-xs btn-link panel-refresh">
												<i class="icon-refresh"></i>
											</button>
											<button type="button" class="btn btn-xs btn-link panel-close">
												<i class="icon-remove"></i>
											</button>
										</div>
									</div>
								</div>
								<div class="panel-body">
									<div class="row">
										<div class="col-md-12">
											<div class="alert alert-info">
												Nice, downward compatible, touchable, jQuery dial
											</div>
										</div>
										<div class="col-md-4">
											<h4>&#215; Disable display input</h4>
											<input class="knob" data-width="100" data-displayInput=false value="35">
										</div>
										<div class="col-md-4">
											<h4>&#215; 'cursor' mode</h4>
											<input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29">
										</div>
										<div class="col-md-4">
											<h4>&#215; Display previous value</h4>
											<input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
										</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<h4>&#215; Angle offset</h4>
											<input class="knob" data-angleOffset=90 data-linecap=round value="35">
										</div>
										<div class="col-md-4">
											<h4>&#215; Angle offset and arc</h4>
											<input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" value="35">
										</div>
										<div class="col-md-4">
											<h4>&#215; 5-digit values, step 1000</h4>
											<input class="knob" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000">
										</div>
									</div>
								</div>
							</div>
							<!-- end: CIRCLE DIALS PANEL -->
						</div>
					</div>
				</div>
			</div>
			<!-- end: PAGE -->
		</div>
		<!-- end: MAIN CONTAINER -->
		<!-- start: FOOTER -->
		<div class="footer clearfix">
			<div class="footer-inner">
				2013 &copy; clip-one by cliptheme.
			</div>
			<div class="footer-items">
				<span class="go-top"><i class="icon-caret-up"></i></span>
			</div>
		</div>
		<!-- end: FOOTER -->
		<!-- start: GLOBAL JAVASCRIPTS -->
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
		<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
		<script src="assets/js/main.js"></script>
		<!-- end: GLOBAL JAVASCRIPTS -->
		<!-- start: PAGE LEVEL JAVASCRIPTS -->
		<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
		<script src="assets/plugins/jQRangeSlider/jQAllRangeSliders-min.js"></script>
		<script src="assets/plugins/jQuery-Knob/js/jquery.knob.js"></script>
		<script src="assets/js/ui-sliders.js"></script>
		<!-- end: PAGE LEVEL JAVASCRIPTS -->
		<script>
			jQuery(document).ready(function() {
				Main.init();
				UISliders.init();
			});
		</script>
	</body>
	<!-- end: BODY -->
</html>